<!--  -->
<template>
  <div>
    <!-- 表格 一级 -->
    <div class="table-container table-1">
      <vxe-table ref="xTable1" :data="tableData" :loading="tableLoading" show-overflow stripe>
        <vxe-column field="department_id" title="部门id"></vxe-column>
        <vxe-column field="department_name" title="部门名称"></vxe-column>
        <vxe-column field="sort" title="排序" sortable></vxe-column>
        <vxe-column field="person_count" title="人数" sortable></vxe-column>
        <vxe-column title="操作" width="180" align="center">
          <template #header>
            <a-space>
              <span>操作</span>
              <a-tooltip>
                <template slot="title">
                  新增部门
                </template>
                <a-button type="primary" shape="circle" icon="plus" @click="handleOpenCreate" />
              </a-tooltip>
            </a-space>
          </template>
          <template #default="{ row }">
            <a-button class="text-btn" type="link" :loading="tableLoading" @click="handleOpenEdit(row)">
              编辑
            </a-button>
            <a-popconfirm title="确认删除?" ok-text="确认" cancel-text="取消" @confirm="confirmDelete(row)">
              <a-button class="text-btn" style="color:red;" type="link" :loading="tableLoading">
                删除
              </a-button>
            </a-popconfirm>
          </template>
        </vxe-column>
      </vxe-table>
    </div>

    <a-modal :title="form.department_id ? '编辑部门' : '新增部门'" :visible="visible" :confirmLoading="loading"
      @ok="handleSubmit" @cancel="handleCancel">
      <a-form-item label="部门名称">
        <a-input v-model="form.department_name" placeholder="请输入部门名称" />
      </a-form-item>
      <a-form-item label="排序">
        <a-input-number v-model="form.sort" :min="1" placeholder="请输入排序值" />
      </a-form-item>
    </a-modal>
  </div>
</template>

<script>
  import moment from 'moment'
  import {
    apiDepartmentList,
    apiDepartmentDelete,
    apiDepartmentUpdate,
    apiDepartmentCreate
  } from '@/api/featch'

  export default {
    name: 'Department',
    data() {
      return {
        // 表格数据
        tableData: [],
        // 表格加载
        tableLoading: false,
        visible: false,
        loading: false,
        form: {
          department_id: '',
          department_name: '',
          sort: 1
        }
      }
    },
    mounted() {
      // 获取部门列表
      this.handleGetTableData()
    },
    methods: {
      /**
       * @description 获取表格数据
       */
      handleGetTableData() {
        this.tableLoading = true
        apiDepartmentList()
          .then(res => {
            this.tableLoading = false
            if (res.code === 200) {
              this.tableData = res.data
            } else {
              this.$message.error(res.message)
            }
          })
          .catch(err => {
            this.tableLoading = false
            this.$message.error(err.toString())
          })
      },
      /**
       * @description 打开编辑弹窗
       */
      handleOpenEdit(row) {
        this.visible = true
        this.form = {
          department_id: row.department_id,
          department_name: row.department_name,
          sort: row.sort
        }
      },
      /**
       * @description 取消编辑
       */
      handleCancel() {
        this.visible = false
        this.form = {
          department_id: '',
          department_name: '',
          sort: 1
        }
      },
      /**
       * @description 提交编辑
       */
      handleOnEdit() {
        if (!this.form.department_name) {
          this.$message.warning('请输入部门名称')
          return
        }

        this.loading = true
        apiDepartmentUpdate(this.form)
          .then(res => {
            if (res.code === 200) {
              this.$message.success('更新成功')
              this.visible = false
              this.handleGetTableData()
            } else {
              this.$message.error(res.message)
            }
          })
          .catch(err => {
            this.$message.error(err.toString())
          })
          .finally(() => {
            this.loading = false
          })
      },
      /**
       * @description 确认删除
       */
      confirmDelete(row) {
        this.tableLoading = true
        apiDepartmentDelete({
            department_id: row.department_id
          })
          .then(res => {
            this.tableLoading = false
            if (res.code === 200) {
              this.$message.success('删除成功')
              // 重新获取列表数据
              this.handleGetTableData()
            } else {
              this.$message.error(res.message)
            }
          })
          .catch(err => {
            this.tableLoading = false
            this.$message.error(err.toString())
          })
      },
      /**
       * @description 格式化
       */
      momentFormat(string) {
        return moment(string).format('YYYY-MM-DD HH:mm:ss')
      },
      /**
       * @description 打开新增弹窗
       */
      handleOpenCreate() {
        this.visible = true
        this.form = {
          department_id: '',
          department_name: '',
          sort: 1
        }
      },
      /**
       * @description 提交新增
       */
      handleOnCreate() {
        if (!this.form.department_name) {
          this.$message.warning('请输入部门名称')
          return
        }

        this.loading = true
        apiDepartmentCreate({
            department_name: this.form.department_name,
            sort: this.form.sort
          })
          .then(res => {
            if (res.code === 200) {
              this.$message.success('新增成功')
              this.visible = false
              this.handleGetTableData()
            } else {
              this.$message.error(res.message)
            }
          })
          .catch(err => {
            this.$message.error(err.toString())
          })
          .finally(() => {
            this.loading = false
          })
      },
      /**
       * @description 提交表单
       */
      handleSubmit() {
        if (this.form.department_id) {
          this.handleOnEdit()
        } else {
          this.handleOnCreate()
        }
      },
    }
  }
</script>

<style lang="less" scoped>
  // 内容
  .flex-container {
    background: #ffffff;
    height: calc(100vh - 64px -24px);
    width: 100%;

    // /deep/ .vxe-loading>.vxe-loading--chunk,
    // .vxe-loading>.vxe-loading--warpper {
    //   color: #91caff;
    // }
  }

  // 右侧表格
  .right-table-container {
    // display: flex;
    margin-left: 10px;
    width: 100%;
    padding: 12px;

    .query-form-header {
      margin-top: 28px;
      margin-bottom: 10px;
      display: flex;

      /deep/ input {
        border: none;
        box-shadow: none;
      }

    }

  }

  .text-btn-quad {
    width: 42px;
    text-align: left;
  }
</style>